<template>
    <el-dialog
            :close-on-click-modal="false"
            :model-value="api.createState.visible"
            :title="api.createState.title"
            destroy-on-close
            width="600"
            @close="api.onCloseCreate()"
    >
        <el-form
                ref="formRef"
                :model="api.createState.form"
                :rules="rules"
                label-width="120px"
                status-icon
        >
            <el-form-item label="类型编码" prop="type">

                <el-select
                        v-if="api.createState.form.parentId !== '0' "
                        v-model="state.active"
                        class="fill-width"
                        @change="onTypeChange"
                >
                    <el-option v-for="item in state.data" :label="item.label" :value="item"></el-option>
                </el-select>

                <el-input v-else v-model="api.createState.form.type" clearable placeholder="请选择类型"/>
            </el-form-item>

            <el-form-item
                    label="类型名称"
                    prop="itemName"
            >
                <el-input
                        v-model="api.createState.form.itemName"
                        clearable placeholder="数据字典类型名称"
                />
            </el-form-item>

            <el-form-item
                    v-if="api.createState.form.parentId != '0'"
                    label="取值字段"
                    prop="itemCode"
            >
                <el-input
                        v-model="api.createState.form.itemCode"
                        clearable placeholder="数据字典取值字段"
                />
            </el-form-item>

            <el-form-item
                    label="类型存储值"
                    prop="itemValue"
            >
                <el-input
                        v-model="api.createState.form.itemValue"
                        clearable placeholder="数据字典类型存储值"
                />
            </el-form-item>

            <el-form-item
                    label="排序号"
                    prop="sortId"
            >
                <el-input-number
                        v-model="api.createState.form.sortId"
                        clearable placeholder="数据字典排序号"
                />
            </el-form-item>

            <el-form-item
                    label="备注信息"
                    prop="description"
            >

                <el-input
                        v-model="api.createState.form.description"
                        :rows="2"
                        placeholder="数据字典备注信息"
                        type="textarea"
                />
            </el-form-item>

            <el-form-item class="mb-0">
                <el-button type="primary" @click="onSubmit">创建</el-button>
                <el-button @click="api.onCloseCreate()">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>

import {DictionaryService} from "~/api/system/dictionary/dictionary.api";
import {reactive, ref, watch} from "vue";
import {AttachMore} from "~/api/types";
import {FormRules} from "element-plus";

interface Props {
    api: DictionaryService;
}

const {api} = withDefaults(defineProps<Props>(), {});

const rules = reactive<FormRules>({
    type: [{required: true, message: "请输入类型编码", trigger: "blur"}],
    itemName: [{required: true, message: "请输入数据字典类型名称", trigger: "blur"}],
    itemValue: [{required: true, message: "请输入数据字典类型存储值", trigger: "blur"}],
    itemCode: [{required: true, message: "请输入数据字典取值字段", trigger: "blur"}],
});

const formRef = ref();

async function onSubmit() {
    const values = await formRef.value.validate();
    if (values) {
        api.submit(api.createState.form).then((res: any) => {
            if (res.ok) {
                api.onCloseCreate();
            }
        });
    }
}

const state = reactive({
    data: [],
    active: {},
});

function getType() {
    const params: AttachMore = {
        target: "dictionary",
        label: "itemName",
        value: "type",
        ext: "id",
        condition: {
            parentId: "0",
        },
    };
    api.attachMore([params]).then(res => {
        state.data = res.data.dictionaryOptions;
    });
}

watch(() => api.createState.visible, value => {
    if (value) {
        getType();
        state.active = {
            value: api.createState.form.type,
            ext: api.createState.form.parentId,
        };
    }
});

function onTypeChange(e: any) {
    api.createState.form.type = e.value;
    api.createState.form.parentId = e.ext;
}
</script>

<style lang="scss" scoped>

</style>
